import React from 'react';
import { Row, Col, Card, Button, Typography, Space } from 'antd';
import { 
  FileSearchOutlined, 
  RobotOutlined, 
  RiseOutlined, 
  TeamOutlined 
} from '@ant-design/icons';
import { useNavigate } from 'react-router-dom';

const { Title, Paragraph } = Typography;

const Home: React.FC = () => {
  const navigate = useNavigate();

  const features = [
    {
      title: '智能简历优化',
      description: 'AI驱动的简历分析与优化，提升ATS通过率',
      icon: <FileSearchOutlined style={{ fontSize: '48px', color: '#1890ff' }} />,
      path: '/resumes'
    },
    {
      title: 'AI岗位匹配',
      description: '基于技能的智能职位推荐，精准匹配',
      icon: <RobotOutlined style={{ fontSize: '48px', color: '#52c41a' }} />,
      path: '/jobs'
    },
    {
      title: '职业发展助手',
      description: '个性化职业规划和学习路径建议',
      icon: <RiseOutlined style={{ fontSize: '48px', color: '#faad14' }} />,
      path: '/assistant'
    },
    {
      title: '企业招聘',
      description: '高效的人才筛选和管理工具',
      icon: <TeamOutlined style={{ fontSize: '48px', color: '#722ed1' }} />,
      path: '/company'
    },
  ];

  return (
    <div style={{ padding: '48px 0' }}>
      <div style={{ textAlign: 'center', marginBottom: '48px', padding: '32px 0' }}>
        <Title level={1} style={{ marginBottom: '16px' }}>智能求职管理系统</Title>
        <Paragraph style={{ fontSize: '18px', color: '#666', maxWidth: '800px', margin: '0 auto 24px' }}>
          让AI助力您的职业发展，从简历优化到面试准备的全方位服务
        </Paragraph>
        <Space size="large">
          <Button type="primary" size="large" onClick={() => navigate('/register')}>
            立即开始
          </Button>
          <Button size="large" onClick={() => navigate('/login')}>
            登录账号
          </Button>
        </Space>
      </div>

      <Row gutter={[24, 24]} justify="center">
        {features.map((feature, index) => (
          <Col xs={24} sm={12} lg={6} key={index}>
            <Card 
              hoverable
              style={{ textAlign: 'center', height: '100%', transition: 'all 0.3s', borderRadius: '8px' }}
              onClick={() => navigate(feature.path)}
              actions={[<Button type="link" key="more">了解更多</Button>]}
            >
              <div style={{ marginBottom: '16px', padding: '16px 0' }}>
                {feature.icon}
              </div>
              <Card.Meta
                title={<h3 style={{ margin: '0 0 8px' }}>{feature.title}</h3>}
                description={<p style={{ color: '#666' }}>{feature.description}</p>}
              />
            </Card>
          </Col>
        ))}
      </Row>
    </div>
  );
};

export default Home;